<template>
  <div>
    <!-- 3D试戴 -->
    <div
      class="try_in"
      :style="{
        'margin-top': marginTop + 'vh',
      }"
    >
      <el-card class="item">
        <el-scrollbar height="65vh">
          <div class="box">
            <div class="title">主观验光</div>
            <!-- <el-descriptions :column="2" border>
              <el-descriptions-item
                v-for="item in optometry"
                :key="item.id"
                :label="item.name"
                width="200px"
              >
                {{ item.value || "---" }}
              </el-descriptions-item>
            </el-descriptions> -->

            <el-row :gutter="24" class="datapoint">
              <el-col
                :lg="12"
                v-for="item in optometry"
                :key="item.id"
                class="single"
              >
                <div class="flex">
                  <div class="data_name">{{ item.name }}:</div>
                  <div class="ml-[0.1rem]">{{ item.value || "---" }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="box">
            <div class="title">配镜参数</div>
            <!-- <el-descriptions :column="2" border>
              <el-descriptions-item
                v-for="item in paramsList"
                :key="item.id"
                :label="item.name"
                width="200px"
              >
                {{ item.value || "---" }}
              </el-descriptions-item>
            </el-descriptions> -->

            <el-row :gutter="24" class="datapoint">
              <el-col
                :lg="12"
                v-for="item in paramsList"
                :key="item.id"
                class="single"
              >
                <div class="flex">
                  <div class="data_name">{{ item.name }}:</div>
                  <div class="ml-[0.1rem]">{{ item.value || "---" }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-scrollbar>
      </el-card>

      <el-card class="item">
        <!-- <div class="title">测量参数</div> -->
        <el-descriptions :column="3">
          <el-descriptions-item
            v-for="item in measureList"
            :key="item.id"
            :label="item.name"
          >
            {{ item.value || "---" }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- <el-row :gutter="24" class="datapoint">
          <el-col
            :sm="12"
            v-for="item in measureList"
            :key="item.id"
            class="single"
          >
            <div class="flex">
              <div class="data_name">{{ item.name }}:</div>
              <div class="ml-[0.1rem]">{{ item.value || "---" }}</div>
            </div>
          </el-col>
        </el-row> -->

        <div class="image_video" v-if="tryOnStatus == 1">
          <div>视频影像</div>
          <div class="image_video_box">
            <el-button type="primary" link title="上移">
              <el-icon size="1.8rem"><CaretTop /></el-icon>
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleStartMeasure"
              class="text-[0.8rem] h-[1.5rem]"
              >开始测量</el-button
            >
            <el-button type="primary" link title="下移">
              <el-icon size="1.8rem"><CaretBottom /></el-icon>
            </el-button>
          </div>
        </div>

        <div class="image_video" v-else>
          <div class="w-full h-full">
            <!-- 人头模型 -->
            <Video3D
              class="w-full h-full"
              style="height: calc(100vh - 17.5rem)"
            />
          </div>
          <div class="image_video_box_2">
            <el-button
              type="primary"
              size="small"
              @click="handleReDetect"
              class="text-[0.8rem] h-[2rem]"
              >重新测量</el-button
            >
          </div>
        </div>
      </el-card>

      <el-card class="item relative">
        <div class="title">定制类镜架</div>
        <div class="px-2">
          <el-form :model="searchForm" ref="searchRef" inline>
            <el-form-item label="拼音码" prop="spelling">
              <el-input
                v-model="searchForm.spelling"
                placeholder="请输入拼音码"
                class="w-[6rem]"
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="Search"
                size="small"
                @click="handleSearch"
                class="w-[3rem]"
                >查询</el-button
              >
              <el-button
                icon="Refresh"
                size="small"
                @click="handleReset"
                class="w-[3rem]"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-scrollbar
          style="height: calc(100vh - 18rem)"
          v-loading="goods_loading"
        >
          <div
            v-infinite-scroll="load_list"
            v-if="goodsList && goodsList.length > 0"
          >
            <div v-for="item in goodsList" :key="item.id" class="goods">
              <el-image :src="item.goodsImg" alt="" class="img">
                <template #error>
                  <div class="error">
                    <img
                      src="https://file.supore.cn/1753089697not.png"
                      alt=""
                      class="img"
                    />
                  </div>
                </template>
              </el-image>

              <div class="content">
                <div>
                  <el-text truncated :title="item.brandName">
                    {{ item.brandName }}
                  </el-text>
                </div>
                <div>
                  <el-text
                    truncated
                    class="text-[0.6rem] mt-[0.3rem]"
                    :title="item.specsDescription"
                  >
                    {{ item.specsDescription }}
                  </el-text>
                </div>
              </div>

              <el-text truncated class="price" :title="item.goodsPrice / 100">
                ￥{{ item.goodsPrice / 100 }}
              </el-text>

              <div>
                <el-button
                  class="w-[3.5rem]"
                  type="danger"
                  size="small"
                  @click="handleCancelTryIn()"
                  v-if="currentTryInGoods && currentTryInGoods.id == item.id"
                  >取消试戴</el-button
                >
                <el-button
                  class="w-[3.5rem]"
                  type="primary"
                  size="small"
                  @click="handleTryIn(item)"
                  v-else
                  >试戴</el-button
                >
              </div>
            </div>
          </div>
          <el-empty
            v-else
            description="暂无镜架数据"
            :image-size="100"
            class="py-2 mt-[3vh]"
          ></el-empty>
        </el-scrollbar>
        <div class="absolute bottom-2 right-3">
          <el-button type="warning" @click="affirmOrder">确认下单</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  ElMessage,
  ElMessageBox,
  ElLoading,
  ElNotification,
} from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import Video3D from "./component/Video3D.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ListGoodsByDictType } from "../../../../wailsjs/go/api/GoodsApi.js";

onMounted(() => {
  marginTop.value = 70 / 50;

  getGoodsList();
});

const useStore = useUserStore();
const { tryOnStatus } = storeToRefs(useUserStore());

// 主观验光
const optometry = ref([
  {
    id: 1,
    name: "OD近用球镜",
  },
  {
    id: 2,
    name: "OS近用球镜",
  },
  {
    id: 3,
    name: "OD近用柱镜",
  },
  {
    id: 4,
    name: "OS近用柱镜",
  },
  {
    id: 5,
    name: "OD近用轴位",
  },
  {
    id: 5,
    name: "OS近用轴位",
  },
]); // 主观验光

// 配镜参数
const paramsList = ref([
  {
    id: 1,
    name: "右眼瞳距",
  },
  {
    id: 2,
    name: "左眼瞳距",
  },
  {
    id: 3,
    name: "右眼瞳高",
  },
  {
    id: 4,
    name: "左眼瞳高",
  },
  {
    id: 5,
    name: "脸宽",
  },
  {
    id: 6,
    name: "鼻梁宽",
  },
  {
    id: 7,
    name: "镜腿长",
  },
  {
    id: 8,
    name: "镜眼距",
  },
  {
    id: 9,
    name: "前倾角",
  },
]);

// 测量参数
const measureList = ref([
  {
    id: 1,
    name: "三庭比例",
  },
  {
    id: 2,
    name: "下颌宽度",
  },
  {
    id: 3,
    name: "脸部长度",
  },
  {
    id: 4,
    name: "下颌高度",
  },
  {
    id: 5,
    name: "脸部宽度",
  },
  {
    id: 6,
    name: "下颌角度数",
  },
]);

// 开始测量
const handleStartMeasure = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "结果生成中，请稍候...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  setTimeout(() => {
    useStore.updateTryOnStatus(2);
    loading.close();
  }, 2000);
};
// 重新检测
const handleReDetect = () => {
  ElMessageBox.confirm("您确定要重新检测吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    useStore.updateTryOnStatus(1);
  });
};

// 定制类镜架
const searchRef = ref(null);
const searchForm = ref({
  generalId: 5,
  spelling: "",
});

const handleSearch = () => {
  getGoodsList();
};
const handleReset = () => {
  searchRef.value.resetFields();
  getGoodsList();
};

// 获取商品列表
const goods_loading = ref(false);
const goodsList = ref([]);
async function getGoodsList() {
  goods_loading.value = true;
  handleApiResponse(() =>
    ListGoodsByDictType({
      ...searchForm.value,
      page: page.value,
      pageSize: pageSize.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      goodsList.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
    goods_loading.value = false;
  });
}

// 滚动加载
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const load_list = () => {
  if (pageSize.value < total.value) {
    pageSize.value += 10;
    getGoodsList();
  }
};

// 试戴
const currentTryInGoods = ref({});
const handleTryIn = (item) => {
  if (tryOnStatus.value == 1) {
    return ElMessage.warning("请先完成测量");
  }
  currentTryInGoods.value = item;
};
const handleCancelTryIn = () => {
  currentTryInGoods.value = {};
};

// 确认下单
const affirmOrder = () => {
  ElMessageBox.confirm("你确定要下单吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElNotification.success({
      title: "提示",
      message: "下单成功",
      position: "bottom-right",
    });
  });
};

// 根据屏幕尺寸，动态控制上边距
const marginTop = ref(7);
window.addEventListener("resize", () => {
  marginTop.value = 70 / 50;
});
</script>

<style scoped lang="scss">
.try_in {
  height: calc(100vh - 8.5rem) !important;
  @apply w-[99%]  mx-auto flex justify-between items-center;
  .item {
    @apply h-full relative;
  }
  .item:deep(.el-card__body) {
    @apply px-1;
  }
  .item:first-child {
    @apply w-[20%];
    .box {
      @apply w-full mb-[1rem];
      .title {
        @apply font-bold mb-[0.8rem];
      }
      .datapoint {
        @apply text-[0.7rem] px-1 box-border;
        .single {
          @apply mb-[0.6rem];
          .data_name {
            @apply w-[4.5rem] text-right;
          }
        }
      }
    }
  }
  .item:nth-child(2) {
    @apply w-[48%];
  }
  .item:last-child {
    @apply w-[30%];
  }

  .item:not(:first-child) {
    .title {
      @apply font-bold mb-[0.8rem];
    }
    .datapoint {
      @apply h-[4rem] text-[0.7rem] px-1 box-border;
      .single {
        @apply mb-[0.6rem];
        .data_name {
          @apply w-[4.5rem] text-right;
        }
      }
    }
  }

  .item :deep(.el-card__header) {
    @apply py-[0.7rem];
  }
  .item :deep(.el-card__footer) {
    @apply py-[0.5rem] px-[0.5rem];
  }
}

.image_video {
  height: calc(100vh - 16rem);
  @apply w-full mt-[0.8rem] flex justify-center items-center relative;
  .image_video_box {
    @apply w-[4.5rem] h-[4.5rem]  absolute bottom-[0.3rem] right-[0.3rem] flex flex-col justify-between items-center;
  }
  .image_video_box_2 {
    @apply w-[4.5rem] h-[1.5rem]  absolute bottom-[0.5rem] right-[0.3rem] flex flex-col justify-between items-center;
  }
  .el-button + .el-button {
    @apply ml-[0];
  }
}

.goods {
  border: 0.05rem solid #e7e5e5;
  @apply w-[99%] h-[4rem] mb-[0.5rem] px-2  flex items-center justify-between rounded box-border;
  .img {
    @apply w-[2.2rem] h-[2.2rem] rounded;
  }

  .content {
    @apply w-[35%] h-[2.2rem] ml-[0.5rem]  px-1 box-border flex flex-col justify-between;
  }

  .price {
    @apply w-[20%] text-[#e99d42];
  }
}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  display: none !important;
}

.el-form--inline .el-form-item {
  @apply mr-1 mb-1;
}

:deep(.el-form-item__label) {
  @apply pr-1;
}
</style>